/**
 * ECharts 按需加载配置
 * 只引入项目中实际使用的图表类型和组件，减少 Bundle 体积
 */

// 引入 ECharts 核心模块
import * as echarts from 'echarts/core'

// 引入柱状图图表，图表后缀都为 Chart
import { BarChart } from 'echarts/charts'

// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent
} from 'echarts/components'

// 标签自动布局、全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features'

// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers'

// 注册必须的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  BarChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer
])

/**
 * 预定义的图表颜色数组
 * 确保项目中所有图表使用统一的颜色方案
 */
export const CHART_COLORS = [
  '#FF4444', '#4CAF50', '#9C27B0', '#2196F3',
  '#FF9800', '#795548', '#607D8B', '#E91E63',
  '#3F51B5', '#009688', '#8BC34A', '#FFC107',
  '#FF5722', '#673AB7', '#00BCD4', '#CDDC39'
]

/**
 * 通用图表配置
 * 提供项目中常用的图表基础配置
 */
export const CHART_BASE_CONFIG = {
  // 网格配置
  grid: {
    left: '15%',
    right: '20%',
    bottom: '5%',
    top: 60,
    containLabel: false
  },
  
  // 标题样式
  titleStyle: {
    fontSize: 16,
    fontWeight: 'bold',
    color: '#333'
  },
  
  // 坐标轴样式
  axisStyle: {
    fontSize: 12,
    color: '#333'
  }
}

/**
 * 创建柱状图配置
 * @param {Object} options - 图表配置选项
 * @param {string} options.title - 图表标题
 * @param {Array} options.yAxisData - Y轴数据（类目）
 * @param {Array} options.seriesData - 系列数据
 * @param {string} options.unit - 数据单位
 * @param {boolean} options.showPercentage - 是否显示百分比
 * @returns {Object} ECharts 配置对象
 */
export const createBarChartOption = ({
  title,
  yAxisData = [],
  seriesData = [],
  unit = '',
  showPercentage = true
}) => {
  const totalValue = seriesData.reduce((sum, val) => sum + val, 0)
  
  return {
    grid: CHART_BASE_CONFIG.grid,
    title: {
      text: title,
      x: 'center',
      top: 10,
      textStyle: CHART_BASE_CONFIG.titleStyle
    },
    tooltip: {
      trigger: 'item',
      formatter: (params) => {
        const currentValue = params.data.value || params.data
        const percentage = totalValue > 0 ? ((currentValue / totalValue) * 100).toFixed(2) : '0.00'
        return `${params.seriesName}<br/>${params.name} : ${currentValue}${unit}${showPercentage ? ` - ${percentage}%` : ''}`
      }
    },
    yAxis: {
      type: 'category',
      data: yAxisData,
      inverse: true,
      axisLabel: {
        ...CHART_BASE_CONFIG.axisStyle,
        margin: 10
      },
      axisLine: { show: false },
      axisTick: { show: false }
    },
    xAxis: {
      type: 'value',
      show: false,
      axisLabel: { show: false },
      axisLine: { show: false },
      axisTick: { show: false },
      splitLine: { show: false }
    },
    series: [{
      name: '统计数量',
      type: 'bar',
      data: seriesData.map((value, idx) => ({
        value: value,
        itemStyle: {
          color: CHART_COLORS[idx % CHART_COLORS.length]
        }
      })),
      barHeight: 25,
      label: {
        position: 'right',
        show: showPercentage,
        formatter: (params) => {
          const currentValue = params.data.value || params.data
          const percentage = totalValue > 0 ? ((currentValue / totalValue) * 100).toFixed(2) : '0.00'
          return `${percentage}%`
        },
        fontSize: 12,
        color: '#666',
        distance: 10
      }
    }]
  }
}

/**
 * 图表实例管理器
 * 提供图表实例的创建、销毁和内存管理功能
 */
export class ChartManager {
  constructor() {
    this.instances = new Map()
    this.resizeHandlers = new Map()
  }

  /**
   * 创建图表实例
   * @param {string} containerId - 容器ID
   * @param {Object} option - 图表配置
   * @returns {Object} 图表实例
   */
  createChart(containerId, option) {
    // 销毁已存在的实例
    this.destroyChart(containerId)

    const container = document.getElementById(containerId)
    if (!container) {
      console.warn(`图表容器 ${containerId} 不存在`)
      return null
    }

    const chart = echarts.init(container)
    chart.setOption(option)

    // 创建防抖的resize处理器
    const resizeHandler = this.debounce(() => {
      if (chart && !chart.isDisposed()) {
        chart.resize()
      }
    }, 300)

    // 存储实例和处理器
    this.instances.set(containerId, chart)
    this.resizeHandlers.set(containerId, resizeHandler)

    // 添加resize监听
    window.addEventListener('resize', resizeHandler)

    return chart
  }

  /**
   * 销毁指定图表实例
   * @param {string} containerId - 容器ID
   */
  destroyChart(containerId) {
    const chart = this.instances.get(containerId)
    const resizeHandler = this.resizeHandlers.get(containerId)

    if (chart) {
      chart.dispose()
      this.instances.delete(containerId)
    }

    if (resizeHandler) {
      window.removeEventListener('resize', resizeHandler)
      this.resizeHandlers.delete(containerId)
    }
  }

  /**
   * 销毁所有图表实例
   */
  destroyAll() {
    for (const containerId of this.instances.keys()) {
      this.destroyChart(containerId)
    }
  }

  /**
   * 防抖函数
   * @param {Function} func - 要防抖的函数
   * @param {number} wait - 等待时间
   * @returns {Function} 防抖后的函数
   */
  debounce(func, wait) {
    let timeout
    return function executedFunction(...args) {
      const later = () => {
        clearTimeout(timeout)
        func(...args)
      }
      clearTimeout(timeout)
      timeout = setTimeout(later, wait)
    }
  }
}

// 导出 ECharts 实例
export default echarts
